<template>
  <main class="spgl-wrap">
    <el-row :gutter="5">
      <el-form :inline="true" :model="formInlineMy" label-width="80px" label-position="left" class="demo-form-inline">
        <el-col :span="8">
          <el-form-item :label="$t('from.id')">
            <el-input v-model="formInlineMy.id" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="$t('from.creator')">
            <el-input v-model="formInlineMy.creator" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('from.name')" style="width: 80%">
            <el-input v-model="formInlineMy.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="$t('from.createTime')">
            <el-input v-model="formInlineMy.createTime" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('from.state')">
            <el-select v-model="formInlineMy.state" placeholder="请选择">
              <el-option label="上线" :value="1" />
              <el-option label="下线" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTableData">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24" :offset="22">
        <el-button type="primary" @click="onNewGoods('')" style="margin: 0 0 10px 15px">新建来源</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%">
          <!-- 来源编号 -->
          <el-table-column prop="code" :label="$t('from.id')" width="130" align="center" />
          <!-- 来源类型 -->
          <el-table-column prop="type" :label="$t('from.type')" width="110" align="center">
            <template #default="scope">
              {{ useDict("source_type", scope.row.type) }}
            </template>
          </el-table-column>
          <!-- 一级来源名称 -->
          <el-table-column prop="subCount" :label="$t('from.firstName')" width="130" align="center" />
          <!-- 子来源数量 -->
          <el-table-column prop="id" :label="$t('from.childrenNum')" width="130" align="center" />
          <!-- 状态 -->
          <el-table-column prop="status" :label="$t('from.state')" width="130" align="center" />
          <!-- 创建人 -->
          <el-table-column prop="createUserName" :label="$t('from.creator')" width="130" align="center" />
          <!-- 创建时间 -->
          <el-table-column prop="createTime" :label="$t('from.createTime')" width="130" align="center" />

          <!-- 操作 -->
          <el-table-column label="操作" align="center" fixed="right">
            <template #default="scope">
              <el-button size="small" plain @click="onNewGoods(scope.row)">编辑</el-button>
              <el-button size="small" plain @click="handleData(scope.$index, scope.row)">数据</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-empty :image-size="200" v-else/>
      </el-col>
      <el-col :span="24">
        <!-- 分页 -->
        <el-pagination v-model:currentPage="pageControls.currentPage" v-model:page-size="pageControls.pageSize" :page-sizes="[5, 10, 20, 30]" :small="pageControls.small" :disabled="pageControls.disabled"
          :background="pageControls.background" layout="total,sizes , prev, pager, next,jumper" :total="pageControls.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
    <AddNoForms v-model:dialogVisible="dialogVisible" :dialogTitle="dialogTitle" :dialogTableValue="dialogTableValue" @confirmHandle="updateTable" v-if="dialogVisible"></AddNoForms>
  </main>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import baseService from "@/service/baseService";
import { useDict } from "@/hooks/useDict";
import { isNull } from "@/utils/filter";
// import AddNoGoods from "@/components/my/spgl/AddNoGoods.vue";
import AddNoForms from "@/components/my/lygl/AddNoForms.vue";

// import { Timer } from '@element-plus/icons-vue'
// interface IForm {
//   title: string;
//   isSell: number;
//   type: number;
//   grade: number;
//   lessonType: number;
// }
// 定义的搜素字段接口
interface IFormMy {
  id: string;
  name: string;
  state: number;
  creator: string;
  createTime: string;
}
// 定义的列表商品字段接口
// interface IGoods {
//   code: string;
//   createId?: number;
//   createTime: string;
//   grade: string;
//   id?: number;
//   isSell: number;
//   lessonForm: number;
//   lessonType: number;
//   payType: number;
//   price?: number;
//   status?: number;
//   title: string;
//   type: number;
// }
interface IListForm {
  code: string;
  createTime: string;
  createUserName: string;
  description: string;
  id: number;
  isValid: number;
  level: number;
  status: number;
  subCount: number;
  thirdCount: number;
  title: string;
  type: number;
  updateTime: string;
}
// 定义分页接口
interface IPage {
  currentPage: number;
  pageSize: number;
  small?: boolean;
  background?: boolean;
  disabled?: boolean;
  total?: number;
}
let dialogVisible = ref(false);
let dialogTitle = ref("");
let dialogTableValue = ref({});
let tableData: IListForm[] = reactive([]); // 表格数据
let isUpdateTable = ref<boolean>(false); // 是否更新表格
// const formInline: IForm = reactive({
//   // 表单数据
//   title: "",
//   isSell: 0,
//   type: 0,
//   grade: 0,
//   lessonType: 0
// });
const formInlineMy: IFormMy = reactive({
  // 表单数据
  id: "",
  name: "",
  state: 1,
  creator: "",
  createTime: ""
});
// 表格分页
const pageControls = reactive<IPage>({
  currentPage: 1,
  pageSize: 5,
  small: false,
  background: true,
  disabled: false,
  total: 1
});
onMounted(() => {
  nextTick(() => {
    fetchGoodsList();
  });
});
// 监听表格是否需要进行更新
watch(
  () => isUpdateTable.value,
  () => {
    fetchGoodsList();
  }
);
// 添加完商品之后，需要重新表格
const updateTable = (isUpdate: boolean) => {
  isUpdateTable.value = isUpdate;
  isUpdate ? console.log("确认更新") : "";
};
const fetchGoodsList = async (
  param: { pageIndex: number; pageSize: number } = {
    pageIndex: pageControls.currentPage,
    pageSize: pageControls.pageSize
  }
) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/channel/list", param);
  if (res.code === 200) {
    // console.log(res.data.records)
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};

// const handleEdit = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const $router = useRouter();
const handleData = (index: number, row: IListForm) => {
  console.log(index, row);

  $router.push({ name: "dataShow", query: { id: "10001" } });
};
// const handleDelete = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const onNewGoods = (row: any) => {
  if (isNull(row)) {
    console.log(1);
    dialogTitle.value = "新增来源";
    dialogTableValue.value = {};
  } else {
    console.log(2);
    console.log(row);
    dialogTitle.value = "编辑来源";
    dialogTableValue.value = JSON.parse(JSON.stringify(row));
  }
  // if(row)
  // 新建商品
  console.log("submit!");
  dialogVisible.value = true;
};

// 数据查询
const searchTableData = async (param = Object.assign(formInlineMy, { pageIndex: pageControls.currentPage, pageSize: pageControls.pageSize })) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/channel/list", param);
  if (res.code === 200) {
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};
// 表格分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageControls.pageSize = val;
  fetchGoodsList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageControls.currentPage = val;
  fetchGoodsList();
};
</script>
<style lang="scss">
.spgl-wrap {
  .el-form-item {
    width: 80%;
    .el-select {
      width: 249px;
    }
  }
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>
